import React from 'react';
import { Layout, Menu, Card, Avatar, Form, Input, Button, Divider, Row, Col } from 'antd';
import {
  UserOutlined,
  SafetyOutlined,
  LogoutOutlined,
  QuestionCircleOutlined,
  SettingOutlined,
  HomeOutlined,
  MailOutlined,
  ReadOutlined,
  ShopOutlined,
  PieChartOutlined,
  DashboardOutlined,
  MessageOutlined,
  UsergroupAddOutlined
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import './HomeLayout.css'; // 假设我们有一个对应的CSS文件

const { Header, Sider, Content } = Layout;
const { Meta } = Card;
const { TextArea } = Input;

const HomeLayout = ({ children }: { children: React.ReactNode }) => {
  const [collapsed, setCollapsed] = React.useState(false);
  const [selectedMenu, setSelectedMenu] = React.useState('profile');

  const onMenuClick: MenuProps['onClick'] = (e) => {
    setSelectedMenu(e.key);
  };

  return (
    <Layout className="user-settings-layout">
      {/* 响应式侧边栏 - 在小屏幕上会折叠 */}
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
        breakpoint="lg"
        width={250}
        className="settings-sider"
      >
        <div className="user-info-card">
          <Card bordered={false}>
            <Meta
              avatar={<Avatar size={64} icon={<UserOutlined />} />}
              title="初学者学生"
              description="beginner@test.com"
            />
          </Card>
        </div>

        {/* <Divider orientation="left" plain>账户设置</Divider> */}
        
        <Menu
          theme="light"
          mode="inline"
          selectedKeys={[selectedMenu]}
          onClick={onMenuClick}
        >
               <Menu.Item key="dashboard" icon={<DashboardOutlined    />}>
            学生仪表盘
          </Menu.Item>
                <Menu.Item key="profile" icon={<ReadOutlined  />}>
            课程列表
          </Menu.Item>
               <Menu.Item key="profile" icon={<ShopOutlined  />}>
            智能学习跟踪
          </Menu.Item>
            <Menu.Item key="profile" icon={<PieChartOutlined  />}>
            智能测验
          </Menu.Item>
            <Menu.Item key="profile" icon={<MessageOutlined  />}>
            AI智能助教
          </Menu.Item>
               <Menu.Item key="profile" icon={<UsergroupAddOutlined  />}>
            学习社区
          </Menu.Item>
                <Menu.Item key="profile" icon={<MailOutlined />}>
            消息
          </Menu.Item>
          <Menu.Item key="profile" icon={<UserOutlined />}>
            个人资料
          </Menu.Item>
          <Menu.Item key="preferences" icon={<SettingOutlined />}>
            学习偏好
          </Menu.Item>
          <Menu.Item key="security" icon={<SafetyOutlined />}>
            安全设置
          </Menu.Item>
          <Menu.Item key="help" icon={<QuestionCircleOutlined />}>
            帮助
          </Menu.Item>
          <Menu.Item key="logout" icon={<LogoutOutlined />}>
            退出登录
          </Menu.Item>
        </Menu>
      </Sider>

      <Layout className="settings-content-layout">
        <Header className="settings-header">
          <h2>
            {selectedMenu === 'profile' && '个人资料'}
            {selectedMenu === 'preferences' && '学习偏好'}
            {selectedMenu === 'security' && '安全设置'}
            {selectedMenu === 'help' && '帮助中心'}
          </h2>
        </Header>

        <Content>{children}</Content>

        
      </Layout>
    </Layout>
  );
};

export default HomeLayout;
